<template>
    <view class="detail-page">
        <!-- 1. 封面信息 -->
        <view class="hero">
            <image class="cover" :src="detail.cover_image" mode="aspectFill" />
            <view class="hero-mask">
                <view class="title">{{ detail.title }}</view>
                <view class="meta">
                    <text class="score">9.5</text>
                    <text class="play-count">{{ detail.view_count || 0 }}次播放</text>
                </view>
            </view>
        </view>

        <!-- 2. 视频播放器 -->
        <view class="player-box">
            <!-- <video id="myVideo" class="player" :src="detail.playUrl"
                controls @error="videoErrorCallback" /> -->
            <HlsPlayer ref="hlsPlayer" :src="detail.playUrl" class="player"  @error="videoErrorCallback" />
        </view>

        <!-- 3. 选集横向滑块 -->
        <!-- <view class="episode-section">
            <scroll-view scroll-x class="episode-scroll">
                <view v-for="(ep, idx) in episodeList" :key="idx" class="episode-item"
                    :class="{ active: currentEp === idx }" @click="switchEp(idx)">
                    <text>第{{ idx + 1 }}课</text>
                </view>
            </scroll-view>
        </view> -->

        <!-- 4. 简介 & 演员 -->
        <view class="info-card">
            <view class="section-title">学校</view>
            <text class="desc">
                {{ "云南师范大学附属中学" }}
            </text>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import uniReq from '@/api/uniReq'
import { onLoad } from '@dcloudio/uni-app';
import HlsPlayer from '@/components/hlsPlayer/hlsPlayer.vue'
import SecurityUtils from '@/utils/security.js'

const videoErrorCallback = (e) => {
    // uni.showToast({ title: e, icon: 'none' })
    console.error(e);
}

const detail = ref({});
const getDetail = async (id) => {
    const res = await uniReq({
        url: '/v3/video/detail/query',
        method: 'GET',
        data: {
            video_id: id
        }
    })
    console.log(res);
    if (res.code === 0) {
        detail.value = res.data
    }
}

const getFlvUrl = async (id) => {
    const res = await uniReq({
        url: '/v3/video/itemPlay',
        method: 'GET',
        data: {
            id: id
        }
    })
    console.log(res);
    if (res.code === 0) {
        detail.value.playUrl = res.data.data.HLS_STREAM30
        if (detail.value.playUrl) {
        // detail.value.playUrl = SecurityUtils.decryptVideoUrl(detail.value.playUrl)// 解密视频URL
        //控制台检测打开状态
        console.log('开发者工具打开状态:', SecurityUtils.detectDevTools());
        if (!SecurityUtils.detectDevTools()) {
            // alert('正常环境下播放视频')
        }else{
            alert('请在正常环境下播放视频')
            SecurityUtils.detectDebugMode()
        }
    }
    }
}

onLoad((options) => {
    getDetail(options.id)
    getFlvUrl(options.id)
})

</script>

<style lang="scss" scoped>
.detail-page {
    background: linear-gradient(to left, #e0eeff, #ffffff);
    min-height: 100vh;
    padding-bottom: 40rpx;
}

/* 1. 封面信息 */
.hero {
    position: relative;
    height: 400rpx;

    .cover {
        width: 100%;
        height: 100%;
    }

    .hero-mask {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30rpx 30rpx 62rpx 30rpx;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
        color: #fff;

        .title {
            font-size: 40rpx;
            font-weight: 600;
        }

        .meta {
            margin-top: 10rpx;

            .score {
                color: #ffb400;
                margin-right: 20rpx;
            }
        }
    }
}

/* 2. 播放器 */
.player-box {
    margin: -60rpx 30rpx 0;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);

    .player {
        width: 100%;
        height: 400rpx; // 16:9
    }
}

/* 3. 选集 */
.episode-section {
    margin: 30rpx;

    .episode-scroll {
        white-space: nowrap;

        .episode-item {
            display: inline-block;
            padding: 12rpx 24rpx;
            margin-right: 16rpx;
            border-radius: 8rpx;
            background: #fff;
            font-size: 26rpx;
            color: #333;

            &.active {
                background: #007aff;
                color: #fff;
            }
        }
    }
}

/* 4. 简介 & 演员 */
.info-card {
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background: #fff;

    .section-title {
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
    }

    .desc {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
    }

    .actor-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;

        .actor-item {
            padding: 8rpx 16rpx;
            border-radius: 8rpx;
            background: #f0f0f0;
            font-size: 26rpx;
        }
    }
}

/* 5. 弹幕 */
.danmu-card {
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background: #fff;

    .section-title {
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
    }

    .danmu-send {
        display: flex;
        gap: 16rpx;

        .danmu-input {
            flex: 1;
            height: 64rpx;
            padding: 0 20rpx;
            border: 2rpx solid #ddd;
            border-radius: 8rpx;
            font-size: 28rpx;
        }

        .danmu-btn {
            width: 120rpx;
            height: 64rpx;
            line-height: 64rpx;
            text-align: center;
            border-radius: 8rpx;
            background: #007aff;
            color: #fff;
            font-size: 28rpx;
        }
    }
}

/* 6. 推荐 */
.rec-card {
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background: #fff;

    .section-title {
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
    }

    .rec-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16rpx;

        .rec-item {
            .rec-cover {
                width: 100%;
                height: 120rpx;
                border-radius: 8rpx;
            }

            .rec-title {
                margin-top: 8rpx;
                font-size: 26rpx;
                color: #333;
            }
        }
    }
}
</style>